<template>
  <div>
    <div>
       <!-- 搜索111111333 -->
       <!-- 搜索 22222-->
    <van-search class="tsssss" v-model="searchTest" shape="round" background="#c92122" placeholder="请输入搜索关键词"
      @search="onSearch" />
    </div>
   

    <!-- 中间区域 -->
    <van-grid :column-num="2">
      <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
    </van-grid>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import { Button } from 'vant'

import { ref } from 'vue'

//底部导航栏的选中索引
let active = ref(0)

//搜索框绑定的数据
let searchTest = ref('')
//search 事件在点击键盘上的搜索/回车按钮后触发
function onSearch(value) {
  console.log('确认搜索:', value)
  console.log(searchTest.value)

}
</script>
<style scoped>
/* .tsssss {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
} */
</style>